import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Location } from '@angular/common';
import { DynamicDialogRef, DynamicDialogConfig } from 'primeng/primeng';
import { ConfigService } from './service/config.service';
import { flyIn } from '../../common/animation/common.animation';

@Component({
  templateUrl: './config-detail.component.html',
  styleUrls: ['./config-detail.component.scss'],
  animations: [flyIn],
  providers: [ConfigService]
})
export class ConfigDetailComponent implements OnInit {

  sysId: number;
  configKey: string;
  configForm: FormGroup;
  configItem: any = {};

  constructor(
    private fb: FormBuilder,
    private configService: ConfigService,
    private ref: DynamicDialogRef,
    private config: DynamicDialogConfig) {
    this.sysId = this.config.data.sysId;
    this.configKey = this.config.data.configKey;
  }

  ngOnInit(): void {
    if(this.configKey){
      this.configService.showDetail(this.configKey).subscribe(configItem => {
        this.configItem = configItem;
        this.buildForm();
      })
    }else{
      this.configItem = {};
    }
    this.buildForm();
  }

  /**保存或更新 */
  saveUpdate() {
    this.configService.saveUpdateConfig(this.configForm.value)
      .subscribe(data => {
        this.ref.close(data);
      });
  }
  /**取消 */
  cancel(){
    this.ref.close();
  }

  buildForm(): void {
    this.configForm = this.fb.group({
      'configName': [this.configItem.configName, [
        Validators.required,
        Validators.minLength(2),
        Validators.maxLength(20)
      ]
      ],
      'configKey': [this.configItem.configKey, [
        Validators.required,
        Validators.maxLength(25)
      ]
      ],
      'configValue': [this.configItem.configValue, [
        Validators.required,
        Validators.maxLength(100)
      ]
      ],
      'configDesc': [this.configItem.configDesc],
      'oldKey': [this.configItem.oldKey]
    });

    this.configForm.valueChanges
      .subscribe(data => this.onValueChanged(data));

    this.onValueChanged();
  }

  onValueChanged(data?: any) {
    if (!this.configForm) { return; }
    const form = this.configForm;

    for (const field in this.formErrors) {
      this.formErrors[field] = '';
      const control = form.get(field);

      if (control && control.dirty && !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }
  }

  formErrors = {
    'configKey': '',
    'configValue': '',
    'sysId': '',
    'configDesc': ''
  };


  validationMessages = {
    'configKey': {
      'required': 'Name is required.',
      'minlength': 'Name must be at least 4 characters long.',
      'maxlength': 'Name cannot be more than 24 characters long.'
    },
    'configValue': {
      'required': 'Code is required.',
      'minlength': 'Code must be at least 4 characters long.',
      'maxlength': 'Code cannot be more than 24 characters long.'
    },
    'sysId': {
      'required': 'Power is required.'
    },
    'configDesc': {
      'required': 'Power is required.'
    }
  };

}
